<template>
  <view class="address-info">
    <view class="cells padd30 page_bg_FAFAFA">
      <u-form labelPosition="left" :model="formData" ref="uForm" :borderBottom='false' :rules='rules'>
        <u-form-item prop="nameValue">
          <u-cell title="收货人" :border="false">
            <u-input border="none" slot="value" placeholder="请填写收货人姓名" v-model="formData.nameValue"></u-input>
          </u-cell>
        </u-form-item>
        <u-form-item prop="mobileValue">
          <u-cell title="手机号" :border="false">
            <u-input maxlength="11" type="number" border="none" slot="value" placeholder="请填写收货人手机号"
              v-model="formData.mobileValue"></u-input>
          </u-cell>
        </u-form-item>
          <u-form-item prop="addressArea">
            <u-cell title="所在地区" :border="false">
              <view slot="value" class="area">
                <picker mode='region' @change="chooseregion" style="width: 100%;">
                  <u-input v-model="formData.addressArea" placeholder="请选择地址" disabled="true" border="none"
                    disabledColor="#FFFFFF"></u-input>
                </picker>
                <u-icon name="arrow-right" color="#999999" size="20"></u-icon>
              </view>
            </u-cell>
          </u-form-item>
          <u-form-item prop="addressValue"  style="background-color: #fff">
            <u-cell  title="详细地址" :border="false">
              <u-input slot="value" placeholder="请填写详细地址" border="none" v-model="formData.addressValue"></u-input>
            </u-cell>
          
          </u-form-item>
        </u-cell-group>
      
        <u-cell title="设置默认地址" :border="false">
          <u-switch slot="value" activeColor="#28A82E" inactiveColor="#D5D5D5" v-model="switchValue"></u-switch>
        </u-cell>
        
      </u-form>
      
    </view>

    <t-button @handleBtnClick="addAddress()" backGround="#FA312A" content="保存地址"></t-button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        switchValue: false,
        formData: {
          nameValue: '',
          mobileValue: '',
          addressValue: '',
          addressArea: '',
          province: '', //省
          city: '', //城市
          region: '' //街区
        },
        userId: '',
        rules: {
          nameValue: [{
            type: 'string',
            required: true,
            message: '请填写收货人姓名',
            trigger: ['blur', 'change']
          }],
          mobileValue: [{
            type: 'string',
            required: true,
            message: '请填写收货人手机号',
            trigger: ['blur', 'change']
          }],
          addressArea: [{
            type: 'string',
            required: true,
            message: '请选择地址',
            trigger: ['blur', 'change']
          }],
          addressValue: [{
            type: 'string',
            required: true,
            message: '请填写详细地址',
            trigger: ['blur', 'change']
          }],
        },
      }
    },
    onReady() {
      //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
      this.$refs.uForm.setRules(this.rules)
    },
    onLoad() {
      this.userId = uni.getStorageSync('userInfo').id
    },
  
    methods: {
      // 获取省市区
      chooseregion(event) {
        console.log(event.detail.value);
        this.formData.province = event.detail.value[0]
        this.formData.city = event.detail.value[1]
        this.formData.region = event.detail.value[2]
        console.log(this.formData.addressArea);
        if (this.formData.province && this.formData.city && this.formData.region) {
          this.formData.addressArea = this.formData.province + '-' + this.formData.city + '-' + this.formData.region
          this.$refs.uForm.validateField('addressArea')
        } else {
          return ''
        }
      },
      checkPhone() {
        const mobileRegex = /^1[3456789]\d{9}$/;
        if (this.formData.mobileValue === '' || !mobileRegex.test(this.formData.mobileValue)) {
          uni.showToast({
            title: '请输入正确手机号',
            icon: 'none',
          });
          return false;
        }
        return true;
      },
      async addAddress() {
        // if (!this.checkPhone()) return
        // if(this.area.length == '') {
        //   uni.showToast({
        //     title: '请选择所在区地址!',
        //     icon: 'none'
        //   })
        //   return true
        // }
        this.$refs.uForm.validate()
        .then(async () => { 
          const res = await this.$http.post('/yaolexue-service-portal/receiveAddress/addReceiveAddress', {
            name: this.formData.nameValue,
            phoneNumber: this.formData.mobileValue,
            detailAddress: this.formData.addressValue,
            userId: this.userId,
            province: this.formData.province,
            city: this.formData.city,
            region: this.formData.region,
            defaultStatus: this.switchValue ? 1 : 0
          }, {
            isNeedLoading: true,
            showErrorMsg: true,
          })
          console.log('addAddress', res);
          getApp().globalData.addressInfo = res.data
          if (res.code == 200) {
            uni.redirectTo({
              url: '/subPages/selectAddress/selectAddress'
            })
          }
        }).catch(errors => {})
      }
    }
  }
</script>

<style lang="scss">

  .address-info {
    .cells {
      .u-cell {
        margin-top: 20rpx;
        display: block;
        overflow: hidden;
        background-color: $color-toolbar;

        &:nth-child(5) {
          margin-top: 0;
        }

        ::v-deep .u-cell__title-text {
          // width: 100px !important;
        }

        .u-input {
          ::v-deep .u-input__content {
            width: 200px !important;

            .u-input__content__field-wrapper__field {
              text-align: right !important;

            }

            .uni-input-placeholder {

              letter-spacing: 1px;
            }
          }

        }

        .area {
          width: 400rpx;
          height: auto;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
</style>